@import 'public';

.detail{
    .wrapper{
        display: flex;
        
        .img-show{
            .left-img{
                .box{
                    width: 560px;
                    position: relative;
                    img{
                        width: 560px;
                        height: 560px;
                    }
                    // 注意比例关系
                    .cover{
                        width: 140px;
                        height: 140px;
                        background-color: rgba(0,0,0,.5);
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        pointer-events: none;
                    }
                }
                
            }
            .right-img{
                height: 560px;
                width: 560px;
                overflow: hidden;
                border: 1px solid #e0e0e0;
                position: absolute;
                top: 0;
                left: 50%;
                margin-top: 120px;
                margin-left: -35px;
                display: none;
                background-color: #fff;
                // opacity: 0;
                img{
                    width: 2240px;
                    height: 2240px;
                    position: absolute;
                }
                
            }
            
        }
        .info-show{
            width: 600px;
            margin-left: 20px;
            h2{
                font-size: 24px;
                color: #212121;
                font-weight: normal;
            }
            .title{
                font-size: 14px;
                color: #b0b0b0;
                padding-top: 8px;
            }
            .prices{
                padding: 12px 0 10px;
                font-size: 18px;
                color: $color;
            }
            .line{
                margin-top: 12px;
                border-bottom: 1px solid #e0e0e0;
            }
            .address{
                background-color: #f9f9fa;
                margin-top: 20px;
                height: 100px;
                text-align: center;
                line-height: 100px;
            }
            .total-price{
                padding: 30px;
                margin: 30px 0;
                background-color: #f9f9fa;
                li{
                    color: #616161;
                    font-size: 14px;
                }
                p{
                    padding-top: 20px;
                    font-size: 24px;
                    color: $color;
                }
            }
            .button-box{
                a{
                    span{
                        display: inline-block;
                    }
                    .add-cart{
                        background-color: $color;
                        color:white;
                        width: 300px;
                        height: 50px;
                        text-align: center;
                        line-height: 50px;
                        font-size: 16px;
                    }
                    .my-cart{
                        height: 50px;
                        width: 250px;
                        background-color: #b0b0b0;
                        color: #fff;
                        text-align: center;
                        line-height: 50px;
                    }
                }
            }
        }
    }
}